<style scoped>
.container {
	padding: 16px;
	/* border: 1px solid #efefef; */
}
</style>

<!-- 页面布局-->
<template>
  <div class="table">
    <!-- 标题导航栏 -->
    <div class="title-box crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <i class="el-icon-tickets"></i>个人中心
        </el-breadcrumb-item> 
        <el-breadcrumb-item>密码修改</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!-- 标题导航栏END -->
    <!-- 主体区 -->
    <div class="container">
      <!-- 表单区 -->
      <div class="form-data-box">
        <el-form
          :model="formBean"
          :rules="validateRules"
          ref="form1"
          label-width="100px"
          class="ruleForm"
        >
          <el-row> 
            <el-col :span="24">
              <el-form-item label="用户名" prop="username">
                <el-input  v-model="formBean.username"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row> 
            <el-col :span="24">
              <el-form-item label="旧密码" prop="password">
                <el-input type="password" v-model="formBean.password"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row> 
            <el-col :span="24">
              <el-form-item label="新密码" prop="newpass1">
                <el-input type="password" v-model="formBean.newpass1"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row> 
            <el-col :span="24">
              <el-form-item label="新密码确认" prop="newpass2">
                <el-input type="password" v-model="formBean.newpass2"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <!-- 表单区END -->
      <!-- 按钮操作区 -->
      <span slot="footer" class="form-btn-box">
        <el-button  @click="resetForm('form1')">重 置</el-button>
        <el-button
          type="primary"
          @click="submitForm('form1')"
          v-loading.fullscreen.lock="fullscreenLoading"
        >确 定</el-button>
        <el-button @click="cnacelForm('form1')">取 消</el-button>
      </span>
      <!-- 按钮操作区END -->
    </div>
    <!-- 主体区END -->
  </div>
</template> 

<script>
import crypt from 'common/crypt.js'
export default {
  data() {
    var validatePass = (rule, value, callback) => {
			var zg =  new RegExp('(?=.*[0-9])(?=.*[a-zA-Z]).{6,20}'); 
			if (!zg.test(value) || Number(value) < 1) {
				callback(new Error("密码中必须包含字母、数字，长度6-20"));
			} else {
				callback();
			}
		}
    return {
      // 提交表单的loading设置标识
      fullscreenLoading: false,
      // 新增用户表单信息
      formBean: {
        username: "", //用户名
        password: "", //旧密码
        pass: "", //旧密码
        newpass1: "", //新密码
        newpass2: "" //新密码确认
      },
      // 表单校验规则
      validateRules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" }
        ],
        // password: [{ required: true, validator: validatePass, trigger: "blur" }],
        // newpass1: [{ required: true, validator: validatePass, trigger: "blur" }],
        // newpass2: [{ required: true, validator: validatePass, trigger: "blur" }]
        password: [{ required: true, message: "输入6-20位有效密码", trigger: "blur" }],
        newpass1: [{ required: true, message: "输入6-20位有效密码", trigger: "blur" }],
        newpass2: [{ required: true, message: "输入6-20位有效密码", trigger: "blur" }]
      }
    };
  },
  // 进入页面加载数据
  activated() {},
  //离开页面销毁定时器
  deactivated() {},
  components: {},

  methods: {
    /**
     * 取消返回
     * @augments formName 表单名称
     */
    cnacelForm(formName) {
      this.$refs[formName].resetFields();
      this.$router.push("home");
    },
    /**
     * 重置表单
     * @augments formName 表单名称
     */
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    /**
     * 提交表单
     * @augments formName 表单名称
     */
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          if (this.formBean.newpass1 !== this.formBean.newpass2) {
            this.$error("两次密码不一致");
            return;
          }
          let params = {
            username: this.formBean.username,
            pass: crypt(this.formBean.password),
            newpass: crypt(this.formBean.newpass1)
          };
          // 开启提交表单的loading
          this.fullscreenLoading = true;
          var url =
            this.httpRoot.BASEURL_UIM + "rest/uim/frame/frmuser/updpass";
          this.$axios
            .post(url, params)
            .then(res => {
              // 关闭提交表单的loading
              this.fullscreenLoading = false;
              if (res.data.result == "true") {
                this.$message({
                  message: "密码修改成功.",
                  type: "success"
                });
                this.formBean = {};
                this.$router.push({
                  path: "/Login"
                });
              } else {
                this.$error(
                  "数据保存失败:" +
                    res.data.resultMessage +
                    ",错误代码:" +
                    res.data.resultCode
                );
              }
            })
            .catch(function(error) {
              this.fullscreenLoading = false;
            });
        }
      });
    }
  }
};
</script>
